<template>
 <div class="im_container" :class="{im_content : sidebar.opened}">
  <div class="im">
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <Hql></Hql>
      <info></info>
    </div>
  </div>
 </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import Card from './components/card'
  import List from './components/list'
  import Info from './components/info'
  import Message from './components/message'
  import Hql from './components/hql'

  export default {
    name: 'im',
    components: { Card, List, Info, Message, Hql },
    computed: {
    ...mapGetters(['sidebar'])
    },
  }

</script>
<style lang="scss" scoped>
  .im_container{
    width: calc(100% - (36px));
    height: calc(100% - (50px));
    position: fixed;
  }
  .im_content{
    width: calc(100% - (180px));
  }
  .im {
    margin: 0px auto;
    min-width: 800px;
    min-height: 650px;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;

    .sidebar, .main {
      height: 100%;
    }
    .sidebar {
      float: left;
      width: 250px;
      color: #f4f4f4;
      background-color: #2e3238;
    }
    .main {
      position: relative;
      overflow: hidden;
      background-color: #eee;
    }
    .info {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      background:goldenrod;
    }
    .head{
      display: block;
      width: 100%;
      height: 10%;
      position: absolute;
      bottom: 0;
      left: 0;
      background:goldenrod;
    }
    .message {
      height: calc(100% - 160px);
    }
    .main info{
      display: block;
      width: 100%;
      height: 100%;
      background: #2e3238;
    }
  }
</style>
